<template>
	<div
		class="entry-item-wrap">
		<svg-icon v-if="item.svg" :iconClass="item.svg" @svgEvent="toggleShow"></svg-icon>
		<h-button v-else class="entry-item" @click="toggleShow($event)">{{item.text}}</h-button>
		<!--展开项-->
		<div v-if="item.children" v-show="showExpandItem" class="entry-expand" :style="entryStyle">
			<div
				v-for="(innerItem, innerIndex) of item.children" :key="innerIndex"
				class="expand-item"
				@click="innerItem.func && innerItem.func(innerItem)">{{innerItem.text}}</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'ExpandButton',
  props: {
    item: Object,
		position: {
			type: String,
			default: 'left'
		}
  },
	data() {
		return {
			showExpandItem: false,
			body: null,
			target: null
		}
	},
	computed: {
		entryStyle() {
			let style = {}
			if(this.position === 'right') {
				style.right = '0'
			} else {
				style.left = '0'
			}
			return style
		}
	},
	mounted() {
		// 获取body元素
		this.body = document.querySelector('body')
		// 添加点击事件监听器
		this.body.addEventListener('click', this.bodyClick)
	},
	beforeDestroy() {
		// 移除点击事件监听器
		this.body.removeEventListener('click', this.bodyClick)
	},
	methods: {
		// body点击事件
		bodyClick(event) {
			if(event.target !== this.target) {
				this.showExpandItem = false
			}
		},
		// 切换是否展示
		toggleShow(event) {
			if(this.item.children && this.item.children.length) {
				this.target = event.target
				this.showExpandItem = !this.showExpandItem
			} else {
				this.item.func && this.item.func(this.item)
			}
		},
	}
}
</script>

<style scoped lang="scss">
.entry-item-wrap{
	position: relative;
	z-index: 1;
	margin-left: 10px;
	&:first-child{
		margin-left: 0px;
	}
	.entry-item{
		position: relative;
		z-index: 3;
		background: #4686F2;
		border-radius: 4px;
		border: 0;
		color: #fff;
		padding: 5px 13px;
		&:hover{
			background:#0c5feb;
		}
	}
	.entry-expand{
		position: absolute;
		z-index: 2;
		bottom: 34px;
		text-align: center;
		padding: 0 13px 0px;
		background: #FFFFFF;
		box-shadow: 0px 0px 6px 0px rgba(203,224,255,0.42);
		border-radius: 4px;
		.expand-item{
			line-height: 36px;
			position: relative;
			cursor: pointer;
			white-space: nowrap;
			&:hover{
				color:#4686F2;
				font-weight: bold;
			}
			&::after{
				content: '';
				position: absolute;
				bottom: 0px;
				left: 0px;
				width: 100%;
				height: 1px;
				background-image: linear-gradient(to right, #d2daeb00 0%, #D2DAEB 40%, #D2DAEB 60%, #d2daeb00 100%);
			}
			&:last-child{
				&::after{
					display: none;
				}
			}
		}
	}
}
</style>
